<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的发布 - 邻里</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            max-width: 500px;
            margin: 0 auto;
            padding: 0 10px 70px;
        }
        
        /* 顶部导航栏 */
        .header {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
            padding: 15px;
            border-radius: 0 0 15px 15px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 12px rgba(78, 84, 200, 0.2);
        }
        
        .header-title {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .header-icon {
            color: white;
            font-size: 1.2rem;
            text-decoration: none;
        }
        
        /* 筛选栏 */
        .filter-bar {
            display: flex;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .filter-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 0.95rem;
            color: #888;
            border-bottom: 2px solid transparent;
        }
        
        .filter-item.active {
            color: #4e54c8;
            border-bottom-color: #4e54c8;
            font-weight: 500;
        }
        
        /* 发布列表 */
        .posts-list {
            margin-bottom: 20px;
        }
        
        /* 发布项 */
        .post-item {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            display: flex;
            text-decoration: none;
            color: inherit;
        }
        
        .post-image {
            width: 100px;
            height: 100px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 2rem;
            flex-shrink: 0;
        }
        
        .post-info {
            flex: 1;
            padding: 15px;
            position: relative;
        }
        
        .post-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .post-meta {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
        
        .post-status {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.8rem;
        }
        
        .status-available {
            background-color: rgba(46, 204, 113, 0.15);
            color: #27ae60;
        }
        
        .status-borrowed {
            background-color: rgba(255, 159, 64, 0.15);
            color: #e67e22;
        }
        
        .status-offline {
            background-color: rgba(156, 163, 175, 0.15);
            color: #6b7280;
        }
        
        .post-actions {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }
        
        .post-action-btn {
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            border: none;
            cursor: pointer;
            background-color: #f5f7fa;
            color: #333;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .post-price {
            color: #ff6b6b;
            font-weight: 600;
            font-size: 1rem;
        }
        
        /* 新建发布按钮 */
        .add-post-btn {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 12px rgba(78, 84, 200, 0.3);
            text-decoration: none;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 0 auto;
        }
        
        .nav-item {
            text-align: center;
            color: #888;
            text-decoration: none;
            font-size: 0.9rem;
        }
        
        .nav-item.active {
            color: #4e54c8;
        }
        
        .nav-item i {
            font-size: 1.2rem;
            display: block;
            margin-bottom: 4px;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #888;
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #ddd;
        }
        
        .empty-state p {
            margin-bottom: 20px;
        }
        
        .empty-state button {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            font-weight: 500;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <a href="javascript:history.back()" class="header-icon"><i class="fas fa-arrow-left"></i></a>
        <div class="header-title">我的发布</div>
        <a href="#" class="header-icon"><i class="fas fa-search"></i></a>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-item active">全部</div>
        <div class="filter-item">可借用</div>
        <div class="filter-item">借用中</div>
        <div class="filter-item">已下架</div>
    </div>
    
    <!-- 发布列表 -->
    <div class="posts-list">
        <!-- 发布项1 -->
        <a href="my_post_detail.html" class="post-item">
            <div class="post-image"><i class="fas fa-camera"></i></div>
            <div class="post-info">
                <div class="post-status status-available">可借用</div>
                <div class="post-title">专业单反相机 佳能EOS R6 几乎全新</div>
                <div class="post-price">50积分/天</div>
                <div class="post-meta">
                    <div><i class="fas fa-eye"></i> 128</div>
                    <div>2024-08-15</div>
                </div>
                <div class="post-actions">
                    <button class="post-action-btn"><i class="fas fa-edit"></i> 编辑</button>
                </div>
            </div>
        </a>
        
        <!-- 发布项2 -->
        <a href="my_post_detail.html" class="post-item">
            <div class="post-image"><i class="fas fa-book-open"></i></div>
            <div class="post-info">
                <div class="post-status status-borrowed">借用中</div>
                <div class="post-title">Web开发入门到实践 前端开发经典书籍</div>
                <div class="post-price">30积分/天</div>
                <div class="post-meta">
                    <div><i class="fas fa-eye"></i> 86</div>
                    <div>2024-08-10</div>
                </div>
                <div class="post-actions">
                    <!-- 去掉了咨询按钮 -->
                </div>
            </div>
        </a>
        
        <!-- 发布项3 -->
        <a href="my_post_detail.html" class="post-item">
            <div class="post-image"><i class="fas fa-gamepad"></i></div>
            <div class="post-info">
                <div class="post-status status-offline">已下架</div>
                <div class="post-title">Switch游戏机 OLED版本 带三个游戏卡带</div>
                <div class="post-price">80积分/天</div>
                <div class="post-meta">
                    <div><i class="fas fa-eye"></i> 215</div>
                    <div>2024-07-28</div>
                </div>
                <div class="post-actions">
                    <button class="post-action-btn"><i class="fas fa-upload"></i> 重新上架</button>
                </div>
            </div>
        </a>
        
        <!-- 发布项4 -->
        <a href="my_post_detail.html" class="post-item">
            <div class="post-image"><i class="fas fa-tools"></i></div>
            <div class="post-info">
                <div class="post-status status-available">可借用</div>
                <div class="post-title">家用工具箱 含螺丝刀/扳手/钳子等常用工具</div>
                <div class="post-price">20积分/天</div>
                <div class="post-meta">
                    <div><i class="fas fa-eye"></i> 156</div>
                    <div>2024-08-05</div>
                </div>
                <div class="post-actions">
                    <button class="post-action-btn"><i class="fas fa-edit"></i> 编辑</button>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 新建发布按钮 -->
    <a href="#" class="add-post-btn"><i class="fas fa-plus"></i></a>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <div>首页</div>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comments"></i>
            <div>社区</div>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-store"></i>
            <div>商城</div>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-user"></i>
            <div>我的</div>
        </a>
    </div>

    <script>
        // 筛选栏切换功能
        const filterItems = document.querySelectorAll('.filter-item');
        filterItems.forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有激活状态
                filterItems.forEach(i => i.classList.remove('active'));
                // 添加当前激活状态
                item.classList.add('active');
            });
        });
        
        // 发布项操作按钮功能
        const actionBtns = document.querySelectorAll('.post-action-btn');
        actionBtns.forEach(btn => {
            btn.addEventListener('click', (e) => {
                // 阻止链接跳转
                e.preventDefault();
                e.stopPropagation();
                
                const action = btn.textContent.trim();
                // 根据按钮文字执行不同操作
                if (action.includes('编辑')) {
                    // 跳转到编辑页面
                    window.location.href = 'edit_post.html';
                } else if (action.includes('重新上架')) {
                    if (confirm('确定要重新上架该物品吗？')) {
                        // 执行重新上架逻辑
                        alert('物品已重新上架');
                    }
                }
            });
        });
    </script>
</body>
</html>
